/**分时电量 */
import * as React from "react";
import ReactEcharts from "echarts-for-react";
export interface EleTimeSharingChartsProps {
  type: number;
  dataSouce: {
    listF: number[];
    listG: number[];
    listJ: number[];
    listP: number[];
  };
}

export interface EleTimeSharingChartsState {}

class EleTimeSharingCharts extends React.Component<
  EleTimeSharingChartsProps,
  EleTimeSharingChartsState
> {
  render() {
    return (
      <div className="chart">
        <ReactEcharts
          option={this.getOption()}
          notMerge={true}
          lazyUpdate={true}
          style={{ height: 400 }}
        />
      </div>
    );
  }
  getOption() {
    let { listF, listG, listJ, listP } = this.props.dataSouce;
    let xdata1 = [
      "0时",
      "1时",
      "2时",
      "3时",
      "4时",
      "5时",
      "6时",
      "7时",
      "8时",
      "9时",
      "10时",
      "11时",
      "12时",
      "13时",
      "14时",
      "15时",
      "16时",
      "17时",
      "18时",
      "19时",
      "20时",
      "21时",
      "22时",
      "23时",
    ];
    let xdata2 = [
      "1日",
      "2日",
      "3日",
      "4日",
      "5日",
      "6日",
      "7日",
      "8日",
      "9日",
      "10日",
      "11日",
      "12日",
      "13日",
      "14日",
      "15日",
      "16日",
      "17日",
      "18日",
      "19日",
      "20日",
      "21日",
      "22日",
      "23日",
      "24日",
      "25日",
      "26日",
      "27日",
      "28日",
      "29日",
      "30日",
      "31日",
    ];
    let xdata3 = [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ];
    let xdaxta: string[] = [];
    switch (this.props.type) {
      case 2: //日
        xdaxta = xdata1;
        break;
      case 3: //月
        xdaxta = xdata2;
        break;
      case 4: //年
        xdaxta = xdata3;
        break;
      default:
        break;
    }
    return {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      legend: {
        bottom: 10,
        left: "center",
        data: ["尖值", "峰值", "平值", "谷值"],
      },

      xAxis: [
        {
          type: "category",
          data: xdaxta,
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "尖值",
          type: "bar",
          stack: "广告",
          emphasis: {
            focus: "series",
          },
          data: listJ,
        },
        {
          name: "峰值",
          type: "bar",
          stack: "广告",
          emphasis: {
            focus: "series",
          },
          data: listF,
        },
        {
          name: "平值",
          type: "bar",
          stack: "广告",
          emphasis: {
            focus: "series",
          },
          data: listP,
        },
        {
          name: "谷值",
          type: "bar",
          stack: "广告",
          emphasis: {
            focus: "series",
          },
          data: listG,
        },
      ],
    };
  }
}

export default EleTimeSharingCharts;
